<script setup lang="ts">
import { ref } from 'vue'
import { useMemberStore } from '@/stores/modules/member'
import { loginTypeEnum, purposeEnum } from '@/types/constants'
const memberStore = useMemberStore()
// 表单数据
const form = ref({
  phone: '',
  code: '',
  password: '',
})

// 是否为登录模式
const isLogin = ref(true)
// 验证码倒计时
const countdown = ref(0)

// 切换登录/注册模式
const toggleMode = () => {
  isLogin.value = !isLogin.value
  // 重置表单
  //Object.keys(form.value).forEach((key) => (form.value[key] = ''))
}

const validatePhone = (phone: string) => {
  // 确保输入是字符串并去除空格
  const phoneStr = String(phone).trim()

  return /^1[3-9]\d{9}$/.test(phoneStr)
}

// 发送验证码
const sendCode = () => {
  console.log(form.value.phone)
  if (!validatePhone(form.value.phone)) {
    uni.showToast({
      title: '请输入正确的手机号码',
      icon: 'none',
    })
    return
  }

  // 开始倒计时
  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)

  // TODO: 调用发送验证码接口
  memberStore.sendVerificationCode(form.value.phone, purposeEnum.REGISTER)
  uni.showToast({
    title: '验证码已发送',
    icon: 'none',
  })
}

// 提交表单
const handleSubmit = async () => {
  // 表单验证
  if (!form.value.phone || !form.value.password) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none',
    })
    return
  }
  if (!isLogin.value) {
    // 表单 校验码
    if (!form.value.code) {
      uni.showToast({
        title: '请填写验证码信息',
        icon: 'none',
      })
      return
    }
  }

  if (!validatePhone(form.value.phone)) {
    uni.showToast({
      title: '请输入正确的手机号码',
      icon: 'none',
    })
    return
  }

  // 调用登录或注册接口
  if (isLogin.value) {
    await memberStore.LoginAccessToken(form.value.phone, form.value.password, loginTypeEnum.PHONE)
    uni.showToast({ icon: 'none', title: '登录成功' })
  } else {
    await memberStore.phoneRegister(form.value.phone, form.value.password, form.value.code)
    uni.showToast({ icon: 'none', title: '注册成功' })
  }

  //页面跳转
  setTimeout(() => {
    // 获取当前页面栈
    const pages = getCurrentPages()
    if (pages.length > 1) {
      // 如果有上一页，返回上一页
      uni.navigateBack()
    } else {
      // 如果没有上一页，跳转到首页
      uni.switchTab({ url: '/pages/index/index' })
    }
  }, 500)
}
</script>

<template>
  <view class="min-h-screen bg-gray-100 p-4">
    <view class="max-w-md mx-auto bg-white rounded-xl shadow-lg p-6 mt-10">
      <!-- 标题 -->
      <view class="text-center mb-8">
        <text class="text-2xl font-bold text-gray-800">{{ isLogin ? '登录' : '注册' }}</text>
      </view>

      <!-- 表单区域 -->
      <view class="space-y-4">
        <!-- 手机号码输入 -->
        <view class="space-y-2">
          <text class="text-lg text-gray-600">手机号码</text>
          <input
            type="text"
            v-model="form.phone"
            class="w-full h-10 px-4 py-2 text-lg border rounded-lg focus:outline-none focus:border-blue-500"
            placeholder="请输入手机号码"
          />
        </view>

        <!-- 验证码输入 -->
        <view v-if="!isLogin" class="space-y-2">
          <text class="text-lg text-gray-600">验证码</text>
          <view class="flex items-center space-x-2">
            <input
              v-model="form.code"
              class="flex-1 h-10 px-4 py-2 text-lg border rounded-lg focus:outline-none focus:border-blue-500"
              placeholder="请输入验证码"
            />
            <button
              :disabled="countdown > 0"
              @tap="sendCode"
              class="px-4 text-lg bg-blue-500 text-white rounded-lg disabled:bg-gray-300"
            >
              {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
            </button>
          </view>
        </view>

        <!-- 密码输入 -->
        <view class="space-y-2">
          <text class="text-lg text-gray-600">密码</text>
          <input
            type="safe-password"
            :password="true"
            v-model="form.password"
            class="w-full h-10 px-4 py-2 text-lg border rounded-lg focus:outline-none focus:border-blue-500"
            placeholder="请输入密码"
          />
        </view>

        <!-- 登录按钮 -->
        <button
          @tap="handleSubmit"
          class="w-full py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
        >
          {{ isLogin ? '登录' : '注册' }}
        </button>

        <!-- 切换登录/注册 -->
        <view class="text-center mt-4">
          <text @tap="toggleMode" class="text-blue-500 text-sm">
            {{ isLogin ? '没有账号？立即注册' : '已有账号？立即登录' }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
page {
  background-color: #f3f4f6;
}
</style>
